<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="header">
            <div class="inputItem">
                <div class="title">优惠券名称</div>
                <div class="inputBox">
                    <el-input v-model="couponAlias" @keyup.enter.native="initList1">
                    </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">优惠券类别</div>
                <div class="inputBox">
                    <el-select size="small" v-model="keyWord" placeholder="请选择">
                        <template>
                            <el-option v-for="item in couponTypeArr" :key="item.value" :label="item.label"
                                :value="item.label">
                            </el-option>
                        </template>
                    </el-select>
                </div>
            </div>
            <!-- 查询 -->
            <div class="Btn_grounp">
                <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
                    @click="initList1">搜索</el-button>
                <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right"
                    @click="CleanUp">清空</el-button>
            </div>
            <el-button class="addBtn" type="primary" size="small"
                @click="$router.push('/operationManagement/coupon/add')">新建优惠券</el-button>
        </div>
        <div class="main">
            <div class="list">
                <el-table :data="records" style="width: 100%" ref="table">
                    <el-table-column align="center" prop="SerialNumber" label="序号" width="70">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 + Number(size) * (pageCurrent - 1) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="优惠券名称">
                        <template slot-scope="scope">
                            <div class="HighlightText">{{ scope.row.couponAlias }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="优惠券类型">
                        <template slot-scope="scope">
                            <div>{{ scope.row.couponName.info }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="couponType" label="类别">
                    </el-table-column>
                    <el-table-column align="center" prop="couponScene" label="适用场景">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="使用条件">
                        <template slot-scope="scope">
                            <div v-if="scope.row.couponType == '满减券'">
                                <div v-if="scope.row.meetWith != ''">
                                    满<span class="HighlightText">{{ scope.row.meetWith }}</span>减
                                    <span class="HighlightText">{{ scope.row.reduction }}</span>
                                </div>
                                <div v-else-if="scope.row.meetWith == ''">
                                    无门槛减免
                                    <span class="HighlightText">{{ scope.row.reduction }}</span>
                                </div>


                            </div>
                            <!-- 阶梯折扣券 -->
                            <div v-else-if="scope.row.couponType == '折扣券' && scope.row.stepPortNumbers.length != 0">
                                <div v-for="item in scope.row.stepPortNumbers" :key="item.sid">
                                    运费
                                    <span class="HighlightText">{{ item.beginNumber * 1 }}≤{{ item.endNumber * 1 }}</span>
                                    折扣
                                    <span class="HighlightText">{{ item.discount + '%' }}</span>
                                </div>
                            </div>
                            <!-- 普通折扣券 -->
                            <div v-else-if="scope.row.couponType == '折扣券' && scope.row.stepPortNumbers.length == 0">
                                <div>
                                    <span v-if="scope.row.meetWith == ''">无门槛抵扣 </span>
                                    <span v-else>满{{ scope.row.meetWith }}元 折扣</span>
                                    <span class="HighlightText">{{ scope.row.reduction + '%' }}</span>
                                </div>
                            </div>
                            <div v-else-if="scope.row.couponType == '返点券'">
                                <span v-if="scope.row.meetWith == ''">无门槛使用</span>
                                <span v-else-if="scope.row.meetWith != ''">满{{ scope.row.meetWith }} </span>
                                返点<span class="HighlightText">{{ scope.row.reduction }}%</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="已领/总数量">
                        <template slot-scope="scope">
                            <div>
                                <span class="HighlightText">{{ scope.row.receiveCount }}</span>
                                <span>/{{ scope.row.couponTotal }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="状态">
                        <template slot-scope="scope">
                            <div class="switchBox">
                                <el-switch class="switch" v-model="scope.row.couponState" active-color="#1890FF"
                                    @change="switchCouponStateChage($event, scope.row.cid)" inactive-color="#D2D5D7"
                                    :active-value="1" :inactive-value="0">
                                </el-switch>
                                <div :class="{ 'HighlightText': scope.row.couponState == 1 }">
                                    {{ scope.row.couponState == 1 ? '上架' : '下架' }}</div>
                            </div>

                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <div>
                                <div>
                                    <el-button type="text" size="small" @click="
                                        $router.push({ path: '/operationManagement/coupon/details', query: { cid: scope.row.cid } })
                                        ">详情</el-button>
                                    <el-button type="text" size="small" v-if="scope.row.couponState == 0"
                                        @click="deleteCoupon(scope.row.cid)">删除</el-button>
                                </div>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
                    :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
                    <template slot>
                        <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total || '0' }}条,每页{{ data.size || '0' }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
import httpApi from "@/http";
import breadcrumb from "@/components/breadcrumb.vue";
export default {
    data() {
        return {
            couponAlias: "",//优惠券名称
            keyWord: "",//优惠券类别
            couponTypeArr: [{ value: 3, label: '满减券' }, { value: 6, label: '折扣券' }, { value: 9, label: '返点券' }],



            records: [],
            data: {},
            pageCurrent: "1",
            size: "10",


            // permissions: {}
        };
    },
    created() {
        //   this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
    },
    methods: {
        // 删除优惠券
        deleteCoupon(cid) {
            this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                httpApi.operationManagementApi.isDeleteCoupon({ cid }).then(res => {
                    if (res.data.code == 200) {
                        this.initList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 页码变化事件
        changePages(val) {
            this.pageCurrent = val;
            this.initList();
        },
        // 上架开关变化事件
        switchCouponStateChage(val, cid) {
            console.log(val, cid);
            httpApi.operationManagementApi.modifyCouponState({ cid: cid }).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg)
                    this.initList();
                }
            })

        },
		initList1(){
			this.pageCurrent = 1;
			this.initList();
		},
        // 列表
        initList() {
            let params = {
                pageIndex: this.pageCurrent,
                pageSize: this.size,
                keyWord: this.keyWord,
                couponAlias: this.couponAlias
            };
            httpApi.operationManagementApi.couponList(params).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    this.data = res.data.data;
                    this.records = res.data.data.records;
                }
            });
        },


        CleanUp() {
            this.keyWord = ''
            this.couponAlias = ''
            this.initList1();
        },
        // 记录滚动距离
        scrollEvent(res) {
            this.$route.meta.scrollTop = res.target.scrollTop
        },
    },
    components: {
        breadcrumb
    },
    mounted() {
        this.initList();
    },
    activated() {
        //组件激活时监听表格滚动条位置,
        this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
        // 激活设置滚动位置
        this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
    },
    beforeRouteLeave(to, from, next) {
        // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
        this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
        next()
    },
};
</script>
  
<style lang="scss" scoped>
.header {
    height: 75px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 30px;


    .Btn_grounp {
        display: flex;


        .searchBtn {
            width: 80px;
            height: 32px;
            color: #fff;
            font-size: 12px;
        }

        .clearBtn {
            width: 80px;
            height: 32px;
            color: #262626;
            font-size: 12px;
            transition: 0.2s;
            background-color: #fff;

            &:hover {
                color: #1890FF;
                background-color: #ecf5ff;
            }
        }
    }

    .addBtn {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        width: 90px;
        height: 32px;
        background: #1890FF;
        border-radius: 4px;
        transition: 0.2s;
        margin-left: auto;

        &:hover {
            opacity: 0.8;
        }
    }

    .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        >.title {
            color: #262626;
            font-size: 12px;
            margin-right: 7px;
        }

        >.inputBox {
            width: 160px;

            .select {
                ::v-deep .el-input__icon {
                    line-height: 0;
                }
            }

            ::v-deep .el-input__inner {
                height: 32px;
                font-size: 12px;
            }

            ::v-deep .el-input__inner::placeholder {
                color: #c3c3c3;
                font-size: 12px;
            }
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 202px);
    background-color: #fff;

    .list {
        height: calc(100% - 48px);
        padding: 0 30px;

        .HighlightText {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #1890FF;
        }

        .switchBox {
            display: flex;
            justify-content: center;

            .switch {
                margin-right: 9px;
                width: 40px;
                height: 18px;
                border-radius: 9px;
            }
        }



        ::v-deep .el-table__body-wrapper {
            height: calc(100vh - 299px);
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            height: 48px;
            padding: 0;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }


    }

    .paginationBox {
        width: 100%;
        background-color: #fff;
        display: flex;
        height: 48px;
        padding: 0 30px;

        .pagination {
            display: flex;
            align-items: center;
            height: 48px;
            margin-left: auto;
        }
    }
}
</style>
  